<template>
  <div>
    <!-- title 是弹窗的标题 -->
    <!-- :visible.sync="dialogVisible" 控制弹窗的显示隐藏 boolean true 显示 -->
    <!-- width 宽度大小 -->
    <el-dialog title="添加商品" :visible.sync="dialogVisible" width="70%">
      <!--      内容区域-->
      <el-form :model="goodsForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="类目选择" prop="category">
          <el-button type="primary" @click="innerVisible = true">类目选择</el-button>
          <span>{{ goodsForm.category }}</span>
        </el-form-item>
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-button type="primary" @click="innerVisibleImg = true">上传图片</el-button>
          <img :src="goodsForm.image" height="200px" style="margin-left: 10px" alt="" >
        </el-form-item>
        <el-form-item label="商品描述" prop="desc">
          <WangEditor @sendEditor="sendEditor" />
        </el-form-item>

<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="submitForm('goodsForm')">确定</el-button>-->
<!--          <el-button @click="resetForm('goodsForm')">重置</el-button>-->
<!--        </el-form-item>-->
      </el-form>
      <!-- 弹窗底部区域 -->
      <span slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</span>

      <!-- 1.内弹框--- 类目选择  -->
      <el-dialog
          width="40%"
          title="类目选择"
          :visible.sync="innerVisible"
          append-to-body
      >
        <TreeGoods  @sendTreeData="sendTreeData"   />
        <span slot="footer" class="dialog-footer">
				  <el-button @click="innerVisible = false">取 消</el-button>
				  <el-button type="primary" @click="showTreeData">确 定</el-button>
			  </span>
      </el-dialog>

      <!-- 2.外弹框--- 上传图片  -->
      <el-dialog
          width="40%"
          title="上传图片"
          :visible.sync="innerVisibleImg"
          append-to-body
      >
       <UploadImg @sendImg="sendImg" />
        <span slot="footer" class="dialog-footer">
				  <el-button @click="innerVisibleImg = false">取 消</el-button>
				  <el-button type="primary" @click="showImg">确 定</el-button>
			  </span>
      </el-dialog>

    </el-dialog>
  </div>
</template>


<script>

import TreeGoods from './TreeGoods.vue'
import UploadImg from './UploadImg.vue'
import WangEditor from './WangEditor.vue'

export default {
  // props: ["dialogVisible"],
  components: {
    TreeGoods,
    UploadImg,
    WangEditor
  },
  data() {
    return {
      dialogVisible:false,  //外弹窗
      innerVisible: false, //内弹窗
      innerVisibleImg:false,  //图片弹框
      treeData:{}, //接收tree数据
      imgUrl:'',
      goodsForm: {
        title: '',  //商品名称
        price: '',  //商品价格
        sellPoint: '', //商品卖点
        image: '',  //商品图片
        delivery: false,
        category: "", //商品类目
        desc: ''  //商品描述
      },
      rules: {
        title: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请选择商品价格', trigger: 'blur' }
        ],
        sellPoint: [
          { required: true, message: '请选择商品卖点', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请选择商品数量', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写商品描述', trigger: 'blur' }
        ]
      }
    };

  },
  methods: {
    //接收wangEditor 数据
    sendEditor(val){
       this.goodsForm.desc = val
    },
    //显示图片的地址
    sendImg(val){
      console.log("显示图片的地址",val)
      this.imgUrl = val;
    },
    // 显示图片--确认按钮
    showImg(){
      this.innerVisibleImg = false;
      this.goodsForm.image = this.imgUrl;
    },
    //显示Tree的数据
    showTreeData(){
      this.innerVisible = false;

      this.goodsForm.category = this.treeData.name

    },
    //获取Tree数据
    sendTreeData(val){
        console.log("tree数据",val);
        this.treeData = val;
    },
    //自定义事件 -- 通知父亲 -- 修改变量 dialogVisible
    close() {
      this.$emit("changeDialog")
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log("获取输入的信息",this.goodsForm)
          let { title,image,sellPoint,price,category,num,desc } = this.goodsForm
          this.$api.addGoods({
            title,image,sellPoint,price,category,num,desc
          }).then(res=>{
            console.log("添加--成功",res.data)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


  }
}
</script>

<style lang="less">
.line {
  text-align: center;
}
</style>
